<template>
  <view class="user-evaluation" v-cloak>
    <view class="evaluation-header">
      <image :src="selectStore.logo" mode="aspectFill" class="header-img"></image>
      <view class="header-info">
        <view class="box-flex" @click="handleStoreDetail()">
          <view class="info-title">
            <h2>{{selectStore.name}}</h2>
            <uni-rate size="14" :value="selectStore.score"></uni-rate>
          </view>
          <!-- <uni-icons type="right" size="14" color="#B0B0B0"></uni-icons> -->
        </view>
        <view class="info-p">
          <view>{{selectStore.orgIndustry}}</view>
          <view class="box-flex" @click="handleOpenLocation()" v-if="selectStore.distance">
            <image class="icon" src="@/static/position-green.png" mode="aspectFill"></image>
            {{selectStore.distance}}
          </view>
        </view>
      </view>
    </view>
    <view class="evaluation-tabs not-bar">
      <view class="tabs-item" :class="curTabs == idx?'active':''" v-for="(item,idx) in tabList" :key="idx" @click="handleChangeTabs(idx)">{{item}}</view>
    </view>
    <view class="card" v-if="commentList.length">
      <SinyuEvaluation :list="commentList"></SinyuEvaluation>
    </view>
    <view class="var-empty" v-else>暂无评论</view>
  </view>
</template>

<script>
  import SinyuEvaluation from '@/components/SinyuEvaluation.vue';
  export default {
    components:{SinyuEvaluation},
    data() {
      return {
        curTabs:0,
        tabList:[],
        params:{
          page:1,
          pageSize:10
        },
        commentList:[],
        selectStore:{},
        moreStatus:'more'
      };
    },
    onLoad() {
      this.selectStore = uni.getStorageSync('selectStore')
      this.$get('/social/yahe/comment/getCommentCount',{
        appId:'yh_mouth_org',
        topicId:this.selectStore.id
      }).then(res=>{
        const {content} = res
        this.tabList = [
          `全部(${content.allCommentCount})`,
          `好评(${content.goodCommentCount})`,
          `差评(${content.badCommentCount})`
        ]
        this._getCommentList()
      })
    },
    onReachBottom() {
      if(this.params.total > this.commentList.length){
        ++this.params.page;
        this._getCommentList()
      }else{
        this.moreStatus="no-more"
      }
    },
    methods:{
      handleStoreDetail(){
        return;
        uni.navigateTo({
          url:`/mainPackage/shops-detail?id=${this.selectStore.id}`
        })
      },
      handleMoreComment(){
        uni.navigateTo({
          url:`/mainPackage/all-evaluation?topicId=${this.selectStore.id}&appId=yh_mouth_org`
        })
      },
      handleChangeTabs(idx){
        this.curTabs = idx
        this.params.page = 1
        this.commentList = []
        this._getCommentList({
          level:idx
        })
      },
      handleOpenLocation(){
        uni.openLocation({
          latitude: parseFloat(this.selectStore.latitude),
          longitude: parseFloat(this.selectStore.longitude),
          scale: 18,
          name:this.selectStore.name,
          address:this.selectStore.address,
        })
      },
      ///   network
      _getCommentList(value){
        const data = {
          ...this.params,
          appId:'yh_mouth_org',
          topicId:this.selectStore.id,
          ...value
        }
        if(data.level<1){
          delete data.level
        };
        uni.showLoading({
          title:'加载中...'
        })
        this.$get('/social/yahe/comment/pageList',data,'1').then(res=>{
          if(res.code == '1'){
            this.params.total = res.content.pagination.totalCount
            this.commentList = [...this.commentList,...res.content.list]
          }
        })
      }
    }
  }
</script>

<style lang="less" scoped>
.user-evaluation{
  .evaluation-header{
    display: flex;
    border-bottom: 2rpx solid #F6F6F6;
    padding: 20rpx 24rpx 32rpx;
    .header-img{
      width: 148rpx;
      height: 148rpx;
      margin-right: 24rpx;
      border-radius: 8rpx;
    }
    .header-info{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .box-flex{justify-content: space-between;}
      .info-title{
        font-size: 26rpx;
        color: var(--title-color);
        font-weight: bold;
        h2{margin-bottom: 12rpx;}
      }
      .info-p{
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 22rpx;
        color: var(--sub-title);
        .box-flex{
          align-items: center;
          .icon{
            width: 32rpx;
            height: 32rpx;
          }
        }
      }
    }
  }  // evaluation-header end
  
  .evaluation-tabs{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    flex-wrap: nowrap;
    padding-left: 24rpx;
    overflow-x: auto;
    background: var(--page-bg);
    .tabs-item{
      font-size: 28rpx;
      color: #6D6D6D;
      position: relative;
      padding: 28rpx 0;
      margin-right: 44rpx;
      white-space: nowrap;
      &::after{
        position: absolute;
        display: block;
        content: '';
        width: 34rpx;
        height: 6rpx;
        background: transparent;
        bottom: 14rpx;
        left: 50%;
        transform: translate(-50%,0);
      }
      &.active{
        font-weight: bold;
      }
      &.active::after{
        background: linear-gradient( 90deg, #29D8C6 0%, #10BEAF 100%);
      }
    }
  } /// evaluation-tabs end
  
  .card{
    padding: 0 24rpx;
  }
}
</style>
